<script setup>
import CommonNodeDrag from './cmp/CommonNodeDrag.vue';
import WhenNodeDrag from './group/WhenNodeDrag.vue';

</script>

<template>
  <aside class="ivy-aside-scrollbar" style="overflow: hidden auto;user-select:none">
    <vs-collapse type="margin" class="ivy-collapse" :open-hover="false">
      <vs-collapse-item open>
       <template #header>
         <div>
          组件
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <CommonNodeDrag />
        <!-- <SwitchNodeDrag />
        <IfNodeDrag />
        <ForNodeDrag />
        <WhileNodeDrag />
        <IteratorNodeDrag />
        <BreakNodeDrag />
        <FallbackNodeDrag /> -->
       </span>
     </vs-collapse-item>
     <vs-collapse-item open>
       <template #header>
         <div>
          分组
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <!-- <ThenNodeDrag /> -->
        <WhenNodeDrag />
        <!-- <SubFlowNodeDrag /> -->
       </span>
     </vs-collapse-item>
     <!-- <vs-collapse-item open>
       <template #header>
         <div>
          脚本
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <ScriptNodeDrag />
        <SwitchScriptNodeDrag />
        <IfScriptNodeDrag />
        <ForScriptNodeDrag />
        <WhileScriptNodeDrag />
        <BreakScriptNodeDrag />
       </span>
     </vs-collapse-item>
     
     <vs-collapse-item open>
       <template #header>
         <div>
          自定义组件
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        
       </span>
     </vs-collapse-item> -->
    </vs-collapse>
  </aside>
</template>

<style scoped>
.ivy-collapse{
  padding: 0 !important;
}

.ivy-collapse .vs-collapse-item{
  margin: 0 !important;
  background-color: transparent;
  box-shadow: none;
}



/* 只针对具有ivy-aside-scrollbar类的元素的滚动条宽度 */
.ivy-aside-scrollbar::-webkit-scrollbar {
  inline-size: 0;
}

</style>
